<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>实时操作-模式配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/plugin/layui/css/layui.css}" media="all">
    <style type="text/css">
        .layui-form-item {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
<div style="padding: 8px;">
    <!-- 卡片风格 -->
    <div class="layui-tab layui-tab-brief layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">航行模式</li>
            <li>锚泊模式</li>
            <li>漂浮模式</li>
            <li>单点循环</li>
            <li>公共参数</li>
        </ul>
        <div class="layui-tab-content">
            <!--------------------------------------------------航行模式---------------------------------------------------------->
            <div class="layui-tab-item layui-show">
                <form class="layui-form layui-from-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">1、航速误差范围（用中横线隔开，单位:节，例如： 0.1-3.0，可以填0-3.0）</label>
                        <div class="layui-input-block">
                            <input type="text" id="navigationSpeedScope" name="navigationSpeedScope" required
                                   lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">2、航向误差范围（用中横线隔开，单位:度，例如：0.1-5.0）</label>
                        <div class="layui-input-block">
                            <input type="text" id="navigationCourseScope" name="navigationCourseScope" required
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">3、发送完成后，默认切换（选择的点位就是航线最后一个点位）：</label>
                        <div class="layui-input-block">
<!--                            <input type="radio" name="navigationFinishMode" lay-filter="navigationFinishMode"-->
<!--                                   value="2" title="漂浮模式">-->
                            <input type="radio" name="navigationFinishMode" lay-filter="navigationFinishMode"
                                   value="3" title="锚泊模式">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">4、经纬度误差范围（用中横线隔开，单位:米，例如： 0-100）</label>
                        <div class="layui-input-block">
                            <input type="text" id="navigationDegreeScope" name="navigationDegreeScope" required
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">5、默认速度（航线表如果速度为0，并且上一个点的速度也为0，则使用该默认速度，单位:节）</label>
                        <div class="layui-input-block">
                            <input type="text" id="navigationDefaultSpeed" name="navigationDefaultSpeed" required
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                </form>
            </div>

            <!---------------------------------------------------------锚泊模式----------------------------------------------------->
            <div class="layui-tab-item">
                <form class="layui-form layui-from-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">1、锚停类别：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="anchorType" lay-filter="anchorType"
                                   checked value="1" title="圆周运动">
                            <input type="radio" name="anchorType" lay-filter="anchorType"
                                   value="2" title="八字形运动">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">2、旋转方向：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="anchorRotationType" lay-filter="anchorRotationType"
                                   checked value="1" title="顺时针">
                            <input type="radio" name="anchorRotationType" lay-filter="anchorRotationType"
                                   value="2" title="逆时针">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">3、半径大小（单位: 米）</label>
                        <div class="layui-input-block">
                            <input type="text" id="anchorRadius" name="anchorRadius" required
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">4、误差半径范围（用中横线隔开，单位：米，例如：0-100）</label>
                        <div class="layui-input-block">
                            <input type="text" id="anchorRadiusScope" name="anchorRadiusScope" required
                                   lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">5、转一圈360°需要多少时间（范围是1-48小时，只能设置整数）</label>
                        <div class="layui-input-block">
                            <input type="text" id="anchorTurnAroundTime" name="anchorTurnAroundTime" required
                                   lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                </form>
            </div>

            <!---------------------------------------------------------漂浮模式--------------------------------------------------->
            <div class="layui-tab-item">
                <form class="layui-form layui-from-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;text-align: left;">1、漂浮范围（将起点和终点连接起来作对角线画一个矩形, 点位在这个矩形内变化。经纬度格式：00°00.00000'）</label>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: auto;">起点纬度：</label>
                            <div class="layui-input-block" style="float: left;margin-left: -10px;">
                                <input type="radio" name="wanderStartLatitudeType" lay-filter="wanderStartLatitudeType"
                                       value="N" title="北纬">
                                <input type="radio" name="wanderStartLatitudeType" lay-filter="wanderStartLatitudeType"
                                       value="S" title="南纬">
                            </div>
                            <input type="text" id="wanderStartLatitudeDegree" name="wanderStartLatitudeDegree" required lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                            <input type="text" id="wanderStartLatitudeMinute" name="wanderStartLatitudeMinute"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;分</div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: auto;">起点经度：</label>
                            <div class="layui-input-block"  style="float: left;margin-left: -10px;">
                                <input type="radio" name="wanderStartLongitudeType" lay-filter="wanderStartLongitudeType"
                                       value="E" title="东经">
                                <input type="radio" name="wanderStartLongitudeType" lay-filter="wanderStartLongitudeType"
                                       value="W" title="西经">
                            </div>
                            <input type="text" id="wanderStartLongitudeDegree" name="wanderStartLongitudeDegree" required lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                            <input type="text" id="wanderStartLongitudeMinute" name="wanderStartLongitudeMinute"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;分</div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: auto;">终点纬度：</label>
                            <div class="layui-input-block" style="float: left;margin-left: -10px;">
                                <input type="radio" name="wanderEndLatitudeType" lay-filter="wanderEndLatitudeType"
                                       value="N" title="北纬">
                                <input type="radio" name="wanderEndLatitudeType" lay-filter="wanderEndLatitudeType"
                                       value="S" title="南纬">
                            </div>
                            <input type="text" id="wanderEndLatitudeDegree" name="wanderEndLatitudeDegree" required lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                            <input type="text" id="wanderEndLatitudeMinute" name="wanderEndLatitudeMinute"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;分</div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: auto;">终点经度：</label>
                            <div class="layui-input-block"  style="float: left;margin-left: -10px;">
                                <input type="radio" name="wanderEndLongitudeType" lay-filter="wanderEndLongitudeType"
                                       value="E" title="东经">
                                <input type="radio" name="wanderEndLongitudeType" lay-filter="wanderEndLongitudeType"
                                       value="W" title="西经">
                            </div>
                            <input type="text" id="wanderEndLongitudeDegree" name="wanderEndLongitudeDegree" required lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                            <input type="text" id="wanderEndLongitudeMinute" name="wanderEndLongitudeMinute"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;分</div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">2、速度范围（用中横线隔开，单位:节，例如：0.1-5.9）</label>
                        <div class="layui-input-block">
                            <input type="text" id="wanderSpeedScope" name="wanderSpeedScope" required
                                   lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">3、速度误差范围（用中横线隔开，单位:节，例如：0.1-3.0）</label>
                        <div class="layui-input-block">
                            <input type="text" id="wanderSpeedErrorScope" name="wanderSpeedErrorScope" required
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                </form>
            </div>

            <!---------------------------------------------------------单点循环----------------------------------------------------->
            <div class="layui-tab-item">
                <form class="layui-form layui-from-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">1、航速误差范围（用中横线隔开，单位:节，例如： 0.1-3.0）</label>
                        <div class="layui-input-block">
                            <input type="text" id="singleSpeedScope" name="singleSpeedScope" required
                                   lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                </form>
            </div>

            <!---------------------------------------------------------公共参数----------------------------------------------------->
            <div class="layui-tab-item">
                <form class="layui-form layui-from-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">1、串口发送间隔时间（单位：秒，最大60秒，最小1秒）</label>
                        <div class="layui-input-block">
                            <input type="text" id="commonSendTiming" name="commonSendTiming" required
                                   lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">2、停止航程后是否将所有航线置为等待发送状态：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="commonResetSendStatus" lay-filter="commonResetSendStatus"
                                   value="1" title="是">
                            <input type="radio" name="commonResetSendStatus" lay-filter="commonResetSendStatus"
                                   value="2" title="否">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;">3、新增航线时，如果指定了航线点，则默认将其后的路线状态都置为【等待发送】状态：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="commonResetStatusAfterAdd" lay-filter="commonResetStatusAfterAdd"
                                   value="1" title="是">
                            <input type="radio" name="commonResetStatusAfterAdd" lay-filter="commonResetStatusAfterAdd"
                                   value="2" title="否">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="width: 40%; height: 50%; margin: 10px 30% 0 30%;">
        <div class="layui-input-block">
            <button type="button" class="layui-btn  layui-btn-submit " lay-submit=""
                    lay-filter="modeConfigConfirm">保存
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="modeConfigBack">取消</button>
        </div>
    </div>
</div>


<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">

<script th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/static/plugin/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/app.js}" charset="utf-8"></script>
<script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>

<!--序号自增-->
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script>
    layui.use(['jquery', 'table', 'element'], function () {
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;


        //页面一打开就执行
        layer.ready(function () {
            $.ajax({
                url: ctx + '/common/selectAllConfigList',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(),
                beforeSend: function () {
                    this.layerIndex = showLoad();
                },
                complete: function () {
                    closeLoad(this.layerIndex);
                },
                success: function (data) {
                    if (data.result.code == 200) {
                        // 更新值
                        let configList = data.body;
                        // 遍历对象数组，item表示某个具体的对象
                        for (var item = 0; item < configList.length; item++) {
                            //使用for in 遍历对象属性
                            var paramValue = null;
                            var paramKey = null;
                            for (var i in configList[item]) {
                                if (i == 'paramKey') {
                                    paramKey = configList[item][i];
                                } else if (i == 'paramValue') {
                                    paramValue = configList[item][i];
                                }
                            }
                            if (paramKey != null && paramKey != '') {
                                var obj = $('#' + paramKey);
                                if (typeof obj != 'undefined') {
                                    // 有的类型是radio
                                    if (paramKey == 'navigationFinishMode') {
                                        radioChecked('navigationFinishMode', paramValue);
                                    } else if (paramKey == 'anchorType') {
                                        radioChecked('anchorType', paramValue);
                                    } else if (paramKey == 'anchorRotationType') {
                                        radioChecked('anchorRotationType', paramValue);
                                    } else if (paramKey == 'wanderStartLongitudeType') {
                                        radioChecked('wanderStartLongitudeType', paramValue);
                                    } else if (paramKey == 'wanderStartLatitudeType') {
                                        radioChecked('wanderStartLatitudeType', paramValue);
                                    } else if (paramKey == 'wanderEndLongitudeType') {
                                        radioChecked('wanderEndLongitudeType', paramValue);
                                    } else if (paramKey == 'wanderEndLatitudeType') {
                                        radioChecked('wanderEndLatitudeType', paramValue);
                                    } else if (paramKey == 'commonResetSendStatus') {
                                        radioChecked('commonResetSendStatus', paramValue);
                                    } else if (paramKey == 'commonResetStatusAfterAdd') {
                                        radioChecked('commonResetStatusAfterAdd', paramValue);
                                    } else if (paramKey == 'wanderStartLongitude') {
                                        // 开始节点经度， 回显成度数+分数
                                        echoDegreeValue(paramValue, "wanderStartLongitudeDegree", "wanderStartLongitudeMinute");
                                    } else if (paramKey == 'wanderStartLatitude') {
                                        // 开始节点纬度， 回显成度数+分数
                                        echoDegreeValue(paramValue, "wanderStartLatitudeDegree", "wanderStartLatitudeMinute");
                                    } else if (paramKey == 'wanderEndLongitude') {
                                        // 结束节点经度， 回显成度数+分数
                                        echoDegreeValue(paramValue, "wanderEndLongitudeDegree", "wanderEndLongitudeMinute");
                                    } else if (paramKey == 'wanderEndLatitude') {
                                        // 结束节点纬度， 回显成度数+分数
                                        echoDegreeValue(paramValue, "wanderEndLatitudeDegree", "wanderEndLatitudeMinute");
                                    } else {
                                        obj.val(paramValue);
                                    }
                                }
                            }
                        }
                        // 需要执行这段代码才会刷新
                        form.render();
                    } else {
                        layer.msg(data.result.message);
                    }
                },
                error: function (result) {
                    layer.msg("请求失败！");
                }
            });
        });

        /**点击保存按钮*/
        form.on('submit(modeConfigConfirm)', function () {
            var list = paramList();
            if (list == null || list.length == 0) {
                return;
            }
            $.ajax({
                url: ctx + '/common/updateConfigList',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(list),
                beforeSend: function () {
                    this.layerIndex = showLoad();
                },
                complete: function () {
                    closeLoad(this.layerIndex);
                },
                success: function (data) {
                    if (data.result.code == 200) {
                        // 操作成功
                        layer.msg("操作成功");
                        // 延迟关闭
                        setTimeout(function () {
                            // 关闭所有弹窗
                            parent.layer.closeAll();
                            // 重新加载父窗口
                            window.parent.location.reload();
                        }, 330);
                    } else {
                        layer.msg(data.result.message);
                    }
                },
                error: function (result) {
                    layer.msg("请求失败！");
                }
            });
            return false;
        });

        function paramList() {
            let list = [];
            // 航行模式
            list.push(param('navigationSpeedScope', $('#navigationSpeedScope').val()));
            list.push(param('navigationCourseScope', $('#navigationCourseScope').val()));
            list.push(param('navigationFinishMode', $('input[name="navigationFinishMode"]:checked').val()));
            list.push(param('navigationDegreeScope', $('#navigationDegreeScope').val()));
            list.push(param('navigationDefaultSpeed', $('#navigationDefaultSpeed').val()));
            // 漂浮模式
            // 开始节点的的纬度（可以不设置）
            list.push(param('wanderStartLatitudeType', $('input[name="wanderStartLatitudeType"]:checked').val()));
            var wanderStartLatitudeDegree = $('#wanderStartLatitudeDegree').val();
            var wanderStartLatitudeMinute = $('#wanderStartLatitudeMinute').val();
            if (!isEmpty(wanderStartLatitudeDegree) || !isEmpty(wanderStartLatitudeMinute)) {
                if (checkLatitudeDegreeFormat(wanderStartLatitudeDegree, wanderStartLatitudeMinute, "漂浮模式起点节点：")) {
                    list.push(param('wanderStartLatitude', getDegreeValue(wanderStartLatitudeDegree, wanderStartLatitudeMinute)));
                } else {
                    return null;
                }
            }
            // 开始节点的的经度（可以不设置）
            list.push(param('wanderStartLongitudeType',  $('input[name="wanderStartLongitudeType"]:checked').val()));
            var wanderStartLongitudeDegree = $('#wanderStartLongitudeDegree').val();
            var wanderStartLongitudeMinute = $('#wanderStartLongitudeMinute').val();
            if (!isEmpty(wanderStartLongitudeDegree) || !isEmpty(wanderStartLongitudeMinute)) {
                if (checkLongitudeDegreeFormat(wanderStartLongitudeDegree, wanderStartLongitudeMinute, "漂浮模式起点节点：")) {
                    list.push(param('wanderStartLongitude', getDegreeValue(wanderStartLongitudeDegree, wanderStartLongitudeMinute)));
                } else {
                    return null;
                }
            }
            // 结束节点的的纬度（可以不设置）
            list.push(param('wanderEndLatitudeType', $('input[name="wanderEndLatitudeType"]:checked').val()));
            var wanderEndLatitudeDegree = $('#wanderEndLatitudeDegree').val();
            var wanderEndLatitudeMinute = $('#wanderEndLatitudeMinute').val();
            if (!isEmpty(wanderEndLatitudeDegree) || !isEmpty(wanderEndLatitudeMinute)) {
                if (checkLatitudeDegreeFormat(wanderEndLatitudeDegree, wanderEndLatitudeMinute, "漂浮模式终点节点：")) {
                    list.push(param('wanderEndLatitude', getDegreeValue(wanderEndLatitudeDegree, wanderEndLatitudeMinute)));
                } else {
                    return null;
                }
            }
            // 结束节点的的经度（可以不设置）
            list.push(param('wanderEndLongitudeType', $('input[name="wanderEndLongitudeType"]:checked').val()));
            var wanderEndLongitudeDegree = $('#wanderEndLongitudeDegree').val();
            var wanderEndLongitudeMinute = $('#wanderEndLongitudeMinute').val();
            if (!isEmpty(wanderEndLongitudeDegree) || !isEmpty(wanderEndLongitudeMinute)) {
                if (checkLongitudeDegreeFormat(wanderEndLongitudeDegree, wanderEndLongitudeMinute, "漂浮模式终点节点：")) {
                    list.push(param('wanderEndLongitude', getDegreeValue(wanderEndLongitudeDegree, wanderEndLongitudeMinute)));
                } else {
                    return null;
                }
            }
            list.push(param('wanderSpeedScope', $('#wanderSpeedScope').val()));
            list.push(param('wanderSpeedErrorScope', $('#wanderSpeedErrorScope').val()));
            // 船舶模式
            list.push(param('anchorType', $('input[name="anchorType"]:checked').val()));
            list.push(param('anchorRotationType', $('input[name="anchorRotationType"]:checked').val()));
            list.push(param('anchorRadius', $('#anchorRadius').val()));
            list.push(param('anchorRadiusScope', $('#anchorRadiusScope').val()));
            list.push(param('anchorTurnAroundTime', $('#anchorTurnAroundTime').val()));
            // 单点循环
            list.push(param('singleSpeedScope', $('#singleSpeedScope').val()));
            // 公共参数
            list.push(param('commonSendTiming', $('#commonSendTiming').val()));
            list.push(param('commonResetSendStatus', $('input[name="commonResetSendStatus"]:checked').val()));
            list.push(param('commonResetStatusAfterAdd', $('input[name="commonResetStatusAfterAdd"]:checked').val()));
            return list;
        }

        function param(paramKey, paramValue) {
            return {
                'paramKey': paramKey,
                'paramValue': paramValue
            }
        }

        // 取消按钮
        $("#modeConfigBack").on('click', function () {
            parent.layer.closeAll();
        });

    });
</script>

</body>
</html>